<template>
    <div class="div1">
        <el-select v-model="value" placeholder="请选择计算表类型">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker
            v-model="month"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM">
        </el-date-picker>
        <el-button type="primary" @click="showTable" style="margin-left:30px;">查询</el-button>
        <el-button type="primary" v-show="showBtn">打印</el-button>
        <el-button type="primary" v-show="showBtn">下载</el-button>
        <div class="page_word" v v-show="isShowTable == false">BNS-3-2-3</div>
        <div class="bns_title">
            {{value}}--{{month}}
        </div>
        <!-- 顾客级差计算表 -->
        <div v-show="isShowTable == 'show1'">
            <!-- <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="a1"
                label="编号">
                </el-table-column>
                <el-table-column
                prop="a2"
                label="当月PPV">
                </el-table-column>
                <el-table-column
                prop="a3"
                label="当月GPV">
                </el-table-column>
                <el-table-column
                prop="a4"
                label="上月GPV">
                </el-table-column>
                <el-table-column
                prop="a5"
                label="累计GPV">
                </el-table-column>
                <el-table-column
                prop="a6"
                label="当月OPV">
                </el-table-column>
                <el-table-column
                prop="a7"
                label="上月OPV">
                </el-table-column>
                <el-table-column
                prop="a8"
                label="累计GPV">
                </el-table-column>
                <el-table-column
                prop="a9"
                label="0%">
                </el-table-column>
                <el-table-column
                prop="a10"
                label="6%">
                </el-table-column>
                <el-table-column
                prop="a11"
                label="9%">
                </el-table-column>
                <el-table-column
                prop="a12"
                label="12%">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a13"
                >
                </el-table-column>
                <el-table-column
                prop="a14"
                label="当月级别">
                </el-table-column>
                <el-table-column
                prop="a15"
                label="上月级别">
                </el-table-column>
            </el-table> -->
            <!-- <img src="../../assets/gkjcjsb.jpg" alt=""> -->
            <img src="../../assets/gkjcjsb2.png" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show1'">BNS-3-2-3.1</div>
        <!-- 直销员级差计算表 -->
        <div v-show="isShowTable == 'show2'">
            <!-- <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="a1"
                label="编号">
                </el-table-column>
                <el-table-column
                prop="a2"
                label="当月PPV">
                </el-table-column>
                <el-table-column
                prop="a3"
                label="当月GPV">
                </el-table-column>
                <el-table-column
                prop="a4"
                label="上月GPV">
                </el-table-column>
                <el-table-column
                prop="a5"
                label="累计GPV">
                </el-table-column>
                <el-table-column
                prop="a6"
                label="当月OPV">
                </el-table-column>
                <el-table-column
                prop="a7"
                label="上月OPV">
                </el-table-column>
                <el-table-column
                prop="a8"
                label="累计GPV">
                </el-table-column>
                <el-table-column
                prop="a9"
                label="0%">
                </el-table-column>
                <el-table-column
                prop="a10"
                label="18%">
                </el-table-column>
                <el-table-column
                prop="a11"
                label="21%">
                </el-table-column>
                <el-table-column
                prop="a12"
                label="24%">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a13"
                >
                </el-table-column>
                <el-table-column
                prop="a14"
                label="当月级别">
                </el-table-column>
                <el-table-column
                prop="a15"
                label="上月级别">
                </el-table-column>
            </el-table> -->
            <!-- <img src="../../assets/zxyjcjsb.jpg" alt=""> -->
            <img src="../../assets/zxyjcjsb2.png" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show2'">BNS-3-2-3.2</div>
        <!-- 红宝石奖金计算表 -->
        <div v-show="isShowTable == 'show3'">
              <!-- <el-table
                :data="tableData2"
                border
                style="width: 100%">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
              </el-table>
              <el-table
                :data="tableData3"
                border
                style="width: 100%;margin-top:20px">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
                </el-table>
              <el-table
                :data="tableData4"
                border
                style="width: 100%;margin-top:20px">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
              </el-table>
              <el-table
                :data="tableData5"
                border
                style="width: 100%;margin-top:20px">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
              </el-table> -->
              <!-- <img src="../../assets/hbsjsb.jpg" alt=""> -->
              <img src="../../assets/hbsjsb2.png" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show3'">BNS-3-2-3.3</div>
        <!-- 翡翠奖金计算表 -->
        <div v-show="isShowTable == 'show4'">
            <!-- <el-table
                :data="tableData6"
                border
                style="width: 100%">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
            </el-table> -->
            <img src="../../assets/fcjsb.jpg" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show4'">BNS-3-2-3.4</div>
        <!-- 钻石奖金计算表 -->
        <div v-show="isShowTable == 'show5'">
            <!-- <el-table
                :data="tableData7"
                border
                style="width: 100%">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
            </el-table> -->
            <img src="../../assets/zsjsb.jpg" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show5'">BNS-3-2-3.5</div>
        <!-- 金钻奖金计算表 -->
        <div v-show="isShowTable == 'show6'">
            <!-- <el-table
                :data="tableData8"
                border
                style="width: 100%">
                <el-table-column
                class="aaa"
                label="姓名"
                prop="a1">
                </el-table-column>
                <el-table-column
                label="编号"
                prop="a2">
                </el-table-column>
                <el-table-column
                label="GPV"
                prop="a3">
                </el-table-column>
                <el-table-column
                label="%"
                prop="a4">
                </el-table-column>
                <el-table-column
                label="奖金"
                prop="a5">
                </el-table-column>
            </el-table> -->
            <img src="../../assets/jzjsb.jpg" alt="">
        </div>
        <div class="page_word" v v-show="isShowTable == 'show6'">BNS-3-2-3.6</div>
        
    </div>
</template>
<script>
export default {
    data(){
        return {
            // 显示打印下载按钮
            showBtn:false,

            // 选择器
            options: [
                {
                    value: '顾客级差计算表',
                    label: '顾客级差计算表'
                }, 
                {
                    value: '直销员级差计算表',
                    label: '直销员级差计算表'
                }, 
                {
                    value: '红宝石奖金计算表',
                    label: '红宝石奖金计算表'
                },
                {
                    value: '翡翠奖金计算表',
                    label: '翡翠奖金计算表'
                },
                {
                    value: '钻石奖金计算表',
                    label: '钻石奖金计算表'
                },
                {
                    value: '金钻奖金计算表',
                    label: '金钻奖金计算表'
                },
            ],
            value: '请选择计算表类型',
            month:"",
            isShowTable:false,
            // 顾客级差计算表、直销员级差计算表
            tableData:[
                {
                    a1:"xxx",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                },
                {
                    a1:"xxx",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                },
                {
                    a1:"xxx",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                },
                {
                    a1:"xxx",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                },
            ],
            // 红宝石奖金计算表
            tableData2: [
                {
                    a1:'陈大文',
                    a2:123456,
                    a3:9000,
                    a4:"",
                    a5:2560
                },
                {
                    a1:'----01李红',
                    a2:234567,
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----02张三',
                    a2:112233,
                    a3:18000,
                    a4:2,
                    a5:360
                },
            ],
            tableData3: [
                {
                    a1:'何天游',
                    a2:678901,
                    a3:10000,
                    a4:"",
                    a5:2070
                },
                {
                    a1:'----01陈升',
                    a2:123456,
                    a3:17000,
                    a4:11,
                    a5:1870
                },
                {
                    a1:'----02王江',
                    a2:343468,
                    a3:10000,
                    a4:2,
                    a5:200
                },
            ],
            tableData4: [
                {
                    a1:'李明',
                    a2:789643,
                    a3:20000,
                    a4:"",
                    a5:1980
                },
                {
                    a1:'----02黄河',
                    a2:256893,
                    a3:18000,
                    a4:11,
                    a5:1980
                },
            ],
            tableData5: [
                {
                    a1:'王天天',
                    a2:846321,
                    a3:17000,
                    a4:"",
                    a5:1100
                },
                {
                    a1:'----02黄工',
                    a2:456789,
                    a3:10000,
                    a4:11,
                    a5:1100
                },
            ],
            // 翡翠奖金计算表
            tableData6: [
                {
                    a1:'陈大文',
                    a2:'00074388',
                    a3:22000,
                    a4:"",
                    a5:9660
                },
                {
                    a1:'----李红',
                    a2:'12014536',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----张三',
                    a2:'74125412',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----王五',
                    a2:'10001254',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----陈明',
                    a2:'01241211',
                    a3:4000,
                    a4:11,
                    a5:440
                },
                {
                    a1:'----何良',
                    a2:'10002101',
                    a3:20000,
                    a4:9,
                    a5:1800
                },
                {
                    a1:'----李四',
                    a2:'23423424',
                    a3:18000,
                    a4:7,
                    a5:1260
                },
            ],
            // 钻石奖金计算表
            tableData7: [
                {
                    a1:'黄天',
                    a2:'00074388',
                    a3:20000,
                    a4:"",
                    a5:20240
                },
                {
                    a1:'----吴一凡',
                    a2:'12014536',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----李少丹',
                    a2:'74125412',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----陈小二',
                    a2:'10001254',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----杨天海',
                    a2:'01241211',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----林小雨',
                    a2:'10002101',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----王大文',
                    a2:'23423424',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----伍明明',
                    a2:'23423424',
                    a3:18000,
                    a4:12,
                    a5:2160
                },
                {
                    a1:'----王少强',
                    a2:'23423424',
                    a3:18000,
                    a4:12,
                    a5:2160
                },
                {
                    a1:'----林小小',
                    a2:'23423424',
                    a3:18000,
                    a4:10,
                    a5:1800
                },
                {
                    a1:'----李丽丽',
                    a2:'23423424',
                    a3:18000,
                    a4:10,
                    a5:1800
                },
            ],
            // 金钻奖金计算表
            tableData8: [
                {
                    a1:'黄天',
                    a2:'00074388',
                    a3:'',
                    a4:"",
                    a5:25000
                },
                {
                    a1:'----吴一凡',
                    a2:'12014536',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----李少丹',
                    a2:'74125412',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----陈小二',
                    a2:'10001254',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----杨天海',
                    a2:'01241211',
                    a3:20000,
                    a4:11,
                    a5:2200
                },
                {
                    a1:'----林小雨',
                    a2:'10002101',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----王大文',
                    a2:'23423424',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----伍明明',
                    a2:'23423424',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----王少强',
                    a2:'23423424',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----林小小',
                    a2:'23423424',
                    a3:18000,
                    a4:12,
                    a5:2160
                },
                {
                    a1:'----李丽丽',
                    a2:'23423424',
                    a3:18000,
                    a4:12,
                    a5:2160
                },
                {
                    a1:'----林小小',
                    a2:'23421333',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
                {
                    a1:'----李丽丽',
                    a2:'32423432',
                    a3:18000,
                    a4:11,
                    a5:1980
                },
            ],
            
        }
    },
    methods:{
        showTable(){
            console.log(!this.month == true)
            if(this.value == '顾客级差计算表' && this.month){
                this.isShowTable = 'show1'
                this.showBtn = true
            }else if(this.value == '直销员级差计算表' && this.month){
                this.isShowTable = 'show2'
                this.showBtn = true
            }else if(this.value == '红宝石奖金计算表' && this.month){
                this.isShowTable = 'show3'
                this.showBtn = true
            }else if(this.value == '翡翠奖金计算表' && this.month){
                this.isShowTable = 'show4'
                this.showBtn = true
            }else if(this.value == '钻石奖金计算表' && this.month){
                this.isShowTable = 'show5'
                this.showBtn = true
            }else if(this.value == '金钻奖金计算表' && this.month){
                this.isShowTable = 'show6'
                this.showBtn = true
            }
        }
    }
}
</script>
<style scoped>
.bnsTable_span1{
    display: inline-block;
    margin-right: 30px;
    font-size: 20px;
    margin-bottom: 10px;
    margin-top:20px;
}
.div1 img{
    width:100%
}
</style>


